<template>
  <div id="user">
    <div class="user-bg">
      <img src="./images/bg.png" alt="" v-if="artistInfo.background == null" />
      <img v-else :src="artistInfo.background | ipfsHash" alt="" />
    </div>
    <div class="main-box">
      <!-- 用户信息 -->
      <div class="user-box">
        <div class="avatar">
          <img
            :src="artistInfo.logo | ipfsHash"
            alt="avatar"
            v-if="artistInfo.logo != null"
          />
          <RandomAvatar
            :user_address="artistInfo.user_address"
            v-if="artistInfo.logo == null"
          />
          <!-- 关注按钮 -->
          <div
            class="follow-btn unfollow"
            v-if="artistInfo.isfocus == 0"
            @click="follow()"
          >
            关注
          </div>

          <div
            class="follow-btn followed"
            v-if="artistInfo.isfocus == 1"
            @click="unfollow()"
          >
            已关注
          </div>
        </div>

        <div class="username">
          <span v-if="artistInfo.nickname != null">{{
            artistInfo.nickname
          }}</span>
          <span v-if="artistInfo.nickname == null">{{
            artistInfo.user_address | filterAddress
          }}</span>
        </div>
        <div
          class="address"
          @mouseenter="showFullAddress = true"
          @mouseleave="showFullAddress = false"
        >
          <i class="icon-ETH iconfont"></i>

          <span v-show="showFullAddress">{{ artistInfo.user_address }}</span>
          <span v-show="!showFullAddress">{{
            artistInfo.user_address | filterAddress
          }}</span>
        </div>
        <div class="profile" v-if="artistInfo.introduction !== null">
          {{ artistInfo.introduction }}
        </div>
        <div class="profile" v-if="artistInfo.introduction === null">
          该用户没有简介
        </div>
      </div>
      <!-- 数据栏 -->
      <CountBox :countData="countData" />
    </div>
    <!-- 导航栏 -->
    <NavBar :navs="myNavs" />
  </div>
</template>

<script>
import { mapState } from "vuex";
import NavBar from "@/components/NavBar";
import CountBox from "@/components/CountBox";
import { focusUser} from "@/api";

export default {
  name: "Artist",
  components: {
    NavBar,
    CountBox,
  },
  data() {
    return {
      address: "",
      navIndex: 0,
      // 是否显示按钮组
      isShowBtnGroup: false,
      // 显示完整的地址
      showFullAddress: false,
      // 导航栏数据
      myNavs: [
        {
          id: 0,
          label: "正在售卖",
          type: "onsale",
          url: "",
        },

        {
          id: 1,
          label: "创作",
          type: "created",
          url: "",
        },
        {
          id: 2,
          label: "合集",
          type: "collections",
          url: "",
        },
        {
          id: 3,
          label: "喜欢",
          type: "like/art",
          url: "",
        },

      ],

      countData: [],


      ipfs: "http://172.17.147.23:8888/ipfs/",

      // 是否取消关注弹框
      visible: false,
    };
  },
  methods: {
    // 关注用户
    async follow() {
      // 验证后用户已登录，关注用户
      let focusResult = await focusUser(
        this.artistInfo.user_address.toString()
      );
      if (focusResult.flag) {
        this.$message({
          message: focusResult.msg,
          type: "success",
          customClass: "el-message-custom",
        });
      } else {
        this.$message({
          message: focusResult.msg,
          type: "error",
          customClass: "el-message-custom",
        });
      }

      // 刷新主页信息
      this.$store.dispatch("artistInfo", {
        user_address: this.$store.getters.user_address,
        other_address: this.address,
      });
    },

    // 取消关注用户
    unfollow() {
      this.$confirm("是否取消关注?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          // 确定取消
          let unfocusResult = await focusUser(
            this.artistInfo.user_address.toString()
          );
          if (unfocusResult.flag) {
            this.$message({
              message: unfocusResult.msg,
              type: "success",
              customClass: "el-message-custom",
            });
          } else {
            this.$message({
              message: unfocusResult.msg,
              type: "error",
              customClass: "el-message-custom",
            });
          }
          // 刷新主页信息
          this.$store.dispatch("artistInfo", {
            user_address: this.$store.getters.user_address,
            other_address: this.address,
          });
        })
        .catch(() => {});
    },

   
  },
  computed: {
    ...mapState({
      artistInfo: (store) => store.artist.artistInfo,
    }),
  },
  watch: {
    artistInfo(newValue) {
      let { number_array, number_concerns, number_fans, number_selling } =
        newValue;
      this.countData = [
        { id: 0, name: "粉丝数", count: number_fans },
        { id: 1, name: "已关注", count: number_concerns },
        { id: 3, name: "正在销售", count: number_selling },
        { id: 4, name: "合集数", count: number_array },
      ];
    },
  },
  mounted() {
    this.address = this.$route.params.address;
    // this.$store.dispatch("userInfo", this.address);

    // 获取作者信息
    this.$store.dispatch("artistInfo", {
      other_address: this.address,
    });

    // 获取路由信息
    this.myNavs.forEach((item) => {
      item.url = `/artist/${this.address}/${item.type}`;
    });
  },
};
</script>

<style lang='less'>
// vue动画
.btn-group-enter,
.btn-group-leave-to {
  transform: translateY(-50px);
  opacity: 0;
}
.btn-group-enter-active,
.btn-group-leave-active {
  transition: all 0.2s ease;
}
#user {
  padding-bottom: 50px;
  white-space: nowrap;
  .user-bg:hover {
    .upload-bg {
      opacity: 0.8;
      transition: all 0.2s ease;
    }
  }
  .user-bg {
    overflow: hidden;
    position: relative;
    img {
      width: 100%;
      object-fit: cover;
    }
    height: 300px;
    .upload-bg {
      cursor: pointer;
      opacity: 0;
      font-size: 12px;
      position: absolute;
      right: 30px;
      top: 30px;
      background: var(--themeColor1);
      color: #fff;
      padding: 8px 12px;
      border-radius: 99px;
    }
  }
  .main-box {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    padding-top: 0;
    .user-box {
      margin-top: -50px;
      .avatar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 100px;
        .random-avatar {
          width: 100px !important;
        }
        img {
          border-radius: 50%;
          width: 100px;
          height: 100px;
          z-index: 1;
        }

        .follow-btn {
          z-index: 1;
          cursor: pointer;
          border-radius: 99px;
          padding: 10px 20px;
        }
        .unfollow {
          background: var(--themeColor1);
          color: #fff;
        }
        .followed {
          background: rgb(218, 218, 218);
          color: #fff;
        }
        .btn-box {
          position: relative;
          .more-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            background: var(--themeColor1);
            color: #fff;
            border-radius: 50%;
            padding: 10px;
            position: relative;
            i {
              text-align: center;
              font-size: 20px;
            }
          }
          .more-btn-group {
            position: absolute;
            right: 0;
            top: 0;
            padding-top: 60px;
            .btn-item:hover {
              width: 150px;
              transition: all 0.2s ease 0.2s;
              .btn-item-info {
                display: block;
              }
            }
            .btn-item {
              position: relative;
              overflow: hidden;
              display: flex;
              align-items: center;
              width: 150px;
              height: 40px;
              display: flex;
              align-items: center;
              box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.05);
              margin-bottom: 10px;
              cursor: pointer;
              color: #666;
              padding: 10px;
              border-radius: 99px;
              transition: all 0.2s ease;
              i {
                font-size: 20px;
                border-radius: 50%;
              }
              .btn-item-info {
                position: absolute;
                left: 35px;
                font-size: 14px;
                width: 100px;
                margin-left: 10px;
              }
            }
          }
        }
      }
      .username {
        margin-top: 10px;
        font-size: 24px;
        font-weight: bold;
      }
      .address {
        font-size: 14px;
        margin-top: 10px;
        margin-left: -5px;
        box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.05);
        display: inline-block;
        padding: 5px 10px;
        border-radius: 50px;
        i {
          margin-right: 5px;
          color: var(--themeColor4);
        }
      }
      .profile {
        margin-top: 10px;
        font-size: 14px;
        color: #999;
      }
    }

    .show {
      margin-top: 20px;
    }
  }
}
</style>